<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtree.css">
<script  src="codebase/dhtmlxcommon.js"></script>
<script  src="codebase/dhtmlxtree.js"></script>


<script>
function fixImage(id) {
    var level = tree.getLevel(id)
	//alert( level )
    switch ( level ) {
    case 1:
        ;
        tree.setItemImage2(id, 'folderClosed.gif', 'folderOpen.gif', 'folderClosed.gif');
        break;
    case 2:
        ;
        tree.setItemImage2(id, 'folderClosed.gif', 'folderOpen.gif', 'folderClosed.gif');
        break;
    case 3:
        ;
        tree.setItemImage2(id, 'folderClosed.gif', 'folderOpen.gif', 'folderClosed.gif');
        break;
    default:
        ;
        tree.setItemImage2(id, 'leaf.gif', 'folderClosed.gif', 'folderOpen.gif');
        break;
    }
}


var output_level = 0
var tree_line = '\n'
function gen_tree_str( id )
{
	var tstr = tree.getItemText( id );
	if( id + "" == "undefined" ){
		return ""
	}
	output_level += 1;
	for( var j=0; j<output_level; j++ ){
		tree_line += '\t'
	}
	var idstr = 'item' + output_level.toString();
	tree_line += "<item id='" + id + "' text='" + tstr + "'>"
	idstr = tree.getSubItems( id );
	if( typeof( idstr ) == "number" ){
		idstr = idstr.toString();
		if( idstr == "0" ){
			idstr = "";
		}
	}
	if( idstr != "" ){
		var ids = idstr.split( "," );
		for( var i=0; i<ids.length; i++ ){
			gen_tree_str( ids[i] )
		}
	}
	tree_line += '\n'
	for( var j=0; j<output_level; j++ ){
		tree_line += '\t'
	}
	tree_line += '</item>'
	output_level -= 1;
	return ""
}
function highlight(field) {
       field.focus();
       field.select();
}
function put_content_to_database(){
        var idstr=tree.getSubItems(0); 
        if( typeof( idstr ) == "number" ){
            idstr = idstr.toString();
            if( idstr == "0" ){
                idstr = ""
            }
        }
        var ids = idstr.split( ',' );
        str = '';
        for( var i=0; i<ids.length; i++ ){
            tree_line = '';
            gen_tree_str( ids[i] );
            str += tree_line;
            str += '\n';
        }
        document.getElementById('content').value= str;
        //alert( str );
        document.forms['output_xml'].submit();
}

</script>


    <a href="{{ url }}">{{ url_linktext }}</a><br>
    User Name : {{ login_user }}<br>
	<form name='output_xml' action="/memory/sign" method="post">
		Book Name : <input id="book_name" name="book_name" type="text" value="{{ book_name|escape }}" size=20 onkeypress="if(event.keyCode==13){
			document.getElementById('cmd').value= 'change book name';
			document.forms['output_xml'].submit();
			highlight( this )
		}" ondblclick="highlight(this)" >
		Add Book Name : <input id="add_book_name" name="add_book_name" type="text" value="{{ book_name|escape }}" size=20 onkeypress="if(event.keyCode==13){
			document.getElementById('cmd').value= 'add book name';
            put_content_to_database();
			//document.forms['output_xml'].submit();
			highlight( this );
		}" ondblclick="highlight(this)" >
		<input id="cmd" name="cmd" type="hidden" value="normal" size=20 >
		<br>
		<input id="content" name="content" rows="3" type=hidden cols="60">
	</form>
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" setImagePath="codebase/imgs/" class="dhtmlxTree" style="width:1000px; height:300px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;">
				</div>
			</td>
			<td rowspan="2" style="padding-left:25" valign="top">
			</td>
		</tr>
	</table>
	<table>  
        <tr>
		<td> <a href="javascript:void(0);" onClick="tree.openAllItems(0);">Expand all </a><br> </td>
		<td> <a href="javascript:void(0);" onClick="tree.closeAllItems(0);"> Collapse all </a><br> </td>
		<td> <a href="javascript:void(0);" onClick="tree.openItem(tree.getSelectedItemId());"> Open selected item </a><br> </td>
		<td> <a href="javascript:void(0);" onClick="tree.closeItem(tree.getSelectedItemId());"> Close  selected item </a><br> </td>
		<td> <a href="javascript:void(0);" onClick="tree.openAllItems(tree.getSelectedItemId());"> Expand selected branch </a><br> </td>
		<td> <a href="javascript:void(0);" onClick="tree.closeAllItems(tree.getSelectedItemId());"> Collapse selected branch </a><br> </td>
        </tr>
	</table>
		<a href="javascript:void(0);" onClick="tondbclick(tree.getSelectedItemId());"> Change to Select book name </a><br>
		<a href="javascript:void(0);" onClick="tree.deleteItem(tree.getSelectedItemId(),true);">Delete item </a><br>
	<br>
	<input id="edroot" type="text" value="root" size=80 onkeypress="if(event.keyCode==13){var d=new Date(); tree.insertNewItem(0,d.valueOf(),document.getElementById('edroot').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());highlight( this )  }" onclick="highlight(this)" >
	Root
	<br>
	<input type="text" value="item" size=80 id="ed2" onkeypress="if(event.keyCode==13){var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed2').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());highlight( this )}" onclick="highlight(this)" >
	Next
	<br>
	<input type="text" value="item" size=80 id="ed1" onkeypress="if(event.keyCode==13){var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());highlight( this )}" onclick="highlight(this)" >
	Child
	<br>
	<input type="text" value="" size=80 id="select_item_edit" onkeypress="if(event.keyCode==13){var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('select_item_edit').value); fixImage(d.valueOf());highlight( this )}" onclick="highlight(this)" >
	Edit Select Item
	<br>
	<br>
	<br>

	<a href="javascript:void(0);" onClick="
                put_content_to_database();
	">Put data to datastore</a><br>




 
<script>
		try {
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
		}
		catch( err ){
			alert( err )
		}
tree.setSkin('dhx_skyblue');
tree.setImagePath("codebase/imgs/csh_bluebooks/");
tree.loadXML( "xml" );
tree.setOnDblClickHandler(tondbclick);
tree.setOnClickHandler(tonclick);
tree.enableDragAndDrop(true);

function tonclick(id) {
	str = tree.getItemText(id);
	document.getElementById('select_item_edit').value= str;
	highlight( document.getElementById('select_item_edit') );
};
function tondbclick(id) {
	str = document.getElementById('book_name').value;
	str += "," + tree.getItemText(id);
	document.getElementById('book_name').value= str;
	document.getElementById('cmd').value= 'change book name';
	document.forms['output_xml'].submit();
};


</script>







